<template>
	<view>
		<uni-popup ref="popup" type="bottom" @change="popChange">
			<view class="pop_phone pop-container">
				<view class="popup-title">
					<view class="u-popup-cancel-btn" @click="cancel">取消</view>
					<view class="u-title">选择地址</view>
					<view class="u-popup-qk-btn" @click="qingkong">清空</view>
					<view class="u-popup-sure-btn" @click="confirm">确定</view>
				</view>
				<view class="picker-height">
					<picker-view v-if="visible"  class="mpvue-picker-view" :indicator-style="indicatorStyle" :value="valueArr" @change="bindChange">
						<picker-view-column>
							<view class="mpvue-picker-view-item"	v-for="(item,index) in province" :key="index">{{item.name}}</view>
						</picker-view-column>
						<picker-view-column >
							<view class="mpvue-picker-view-item" v-for="(item,index) in citys" :key="index">{{item.name}}</view>
						</picker-view-column>
						<picker-view-column >
							<view class="mpvue-picker-view-item" v-for="(item,index) in areas" :key="index">{{item}}</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	var addressData = require('./data.js');
	export default {
		name: "chose-address",
		data() {
			return {
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`,
				valueArr: [0, 0, 0], // 用于判断当前滑动的是哪一列
				addressData: [], // 数据列表
				province: [], // 数据列表
				citys: [], // 数据列表
				areas: [], // 数据列表
				visible:false,
			}
		},
		props: {
			isShow:false
		},
		mounted() {
			console.log('---mounted----');
		},
		watch: {
			isShow(val) {
				console.log('---val-----', val);
				if(val){
					this.$refs.popup.open();
					this.visible = true;
					this.initLoadArea();
				}
			}
		},
		methods: {
			popChange(e) {
				if(!e.show){
					var obj = {
						address: "",
						isclose: false
					};
					this.$emit('returnAddress', obj);
				}
				console.log('----popChange---'+JSON.stringify(e));
			},
			initLoadArea() {
				this.province = addressData.default;
				this.province.forEach(item => {
					this.addressData.push(item)
				})
				this.province[0].city.forEach(item => {
					this.citys.push(item)
				})
				this.province[0].city[0].area.forEach(item => {
					this.areas.push(item)
				})
			},
			bindChange(e) {
				const val = e.detail.value;
				if (this.valueArr[0] !== val[0]) {
					for (var i = 0; i < this.citys.length; i++) {
						this.citys.splice(i)
					}
					for (var i = 0; i < this.areas.length; i++) {
						this.areas.splice(i)
					}
					this.addressData[val[0]].city.forEach(item => {
						this.citys.push(item)
					})
					this.addressData[val[0]].city[val[1]].area.forEach(item => {
						this.areas.push(item)
					})
				} else if (this.valueArr[1] !== val[1]) {
					for (var i = 0; i < this.areas.length; i++) {
						this.areas.splice(i)
					}
					this.addressData[val[0]].city[val[1]].area.forEach(item => {
						this.areas.push(item)
					})
				}
				this.valueArr = val
			},
			qingkong:function(){
				var obj = {
					address: "",
					isclose: false,
					tag:"address"
				};
				this.$emit('returnAddress', obj);
				this.$refs.popup.close();
			},
			confirm:function() {
				var obj = {
					address: this.province[this.valueArr[0]].name
					+"-"+this.province[this.valueArr[0]].city[this.valueArr[1]].name
					+"-"+this.province[this.valueArr[0]].city[this.valueArr[1]].area[this.valueArr[2]],
					isclose: false,
					tag:"address"
				};
				this.$emit('returnAddress', obj);
				this.$refs.popup.close();
			},
			cancel:function(){
				var obj = {
					address: "",
					isclose: false,
					tag:""
				};
				this.$emit('returnAddress', obj);
				this.$refs.popup.close();
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "chose-address.css";
</style>
